<template>
  <div id="home-contain">
    <div class="top">
      <van-cell title="推荐歌单" />
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in personalizedList" :key="item.id">
          <van-image width="111" height="100" :src="item.picUrl" />
          <p class="music-name van-multi-ellipsis--l2">{{ item.name }}</p>
        </van-grid-item>
      </van-grid>
      <van-cell title="最新音乐" />
    </div>
    <music-item v-for="item in newMusicList" :key="item.id" :item="item" :author="item.song.artists[0].name" />
  </div>
</template>

<script>
import { getPersonalizedAPI, getNewMusicAPI } from '@/api/home.js'
import MusicItem from '@/components/MusicItem'

export default {
  name: 'Home',
  data () {
    return {
      personalizedList: [],
      newMusicList: []
    }
  },
  created () {
    this.getPersonalizedList()
    this.getNewMusicList()
  },
  methods: {
    async getPersonalizedList () {
      try {
        const { data: res } = await getPersonalizedAPI(6)
        // console.log(res)
        if (res.code === 200) {
          this.personalizedList = res.result
        }
      } catch (error) {
        alert('出错了！')
      }
    },
    async getNewMusicList () {
      try {
        const { data: res } = await getNewMusicAPI(20)
        // console.log(res)
        this.newMusicList = res.result
      } catch (error) {
        alert('出错了！')
      }
    }
  },
  components: {
    MusicItem
  }
}
</script>

<style lang='less' scoped>
#home-contain {
  .top {
    .van-cell {
      background-color: red;
      color: #fff;
    }

    .music-name {
      // word-wrap: break-word;
      font-size: 12px;
      width: 100%;
      padding: 0 5px;
      line-height: 20px;
      text-align: left;
      box-sizing: border-box;
      height: 37px;
    }
    /deep/.van-grid-item__content {
      padding: 10px 0;
    }
  }
}
</style>
